/*
 * @Author: hanyu 
 * @Date: 2018-05-10 09:26:02 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-10-29 18:03:48
 */
<template>
  <div>
    <el-row type="flex" class="rowCon" style="padding: 0;">
      <div class="topLeftCon">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="minTopLeftCon">
          <div class="titleTop">
            <p class="topRightLTopTitle" style="font-size:20px">库存总量(吨)</p>
            <b class="boldFont boldFontSmall" style="margin-left:6pt;position: absolute;">
                <i-count-up :startVal="startVal" :endVal="sumStockNumber" :decimals="decimals" :duration="duration" :options="options" />
            </b>
          </div>
          <chart :chartStyle="'min-height:300px'" :option="sumStockOption" />
        </el-col>
      </div>
      <div class="topRightCon" style="margin-left: 20px">
        <el-row type="flex" justify="space-around" align="center" style="width:100%">
         <el-col v-for="(item,id) in topArr" :key="id" :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="minTopLeftCon" style="text-align:center">
          <p style="font-size:20px">{{item.name}}</p>
          <p>
            <b class="boldFont boldFontSmall">
              <i-count-up :startVal="startVal" :endVal="item.value" :decimals="decimals" :duration="duration" :options="options" />
            </b>  
          </p>       
        </el-col>
        </el-row>
      </div>
      <div class="topLeftCon" style="margin-left:20px">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="minTopLeftCon">
          <div class="titleTop">
            <p class="topRightLTopTitle" style="font-size:20px">定价未售数量</p>
            <b class="boldFont boldFontSmall" style="margin-left:6pt;position: absolute;">
                <i-count-up :startVal="startVal" :endVal="noSellNum" :decimals="decimals" :duration="duration" :options="options" />
            </b>
          </div>
          <chart :chartStyle="'min-height:300px'" :option="noSaleOption" />
        </el-col>
      </div>
    </el-row>
    <el-row type="flex" class="rowCon" style="padding: 0;">
      <div class="topLeftCon">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="minTopLeftCon">
          <div class="topRightLLine row">
            <div class="row">
              <div class="topRightLTopTitleLine">
              </div>
              <span class="topRightLTopTitle">库存量排名前五</span>
            </div>
            <el-select @change="fetchStockSort" style="width:95px;margin-left:10px" v-model="stockWeightDefault">
              <el-option v-for="item in stockWeightArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
          <div>
            <p class="row rowCell">
              <span>仓库</span>
              <span>库存量</span>
            </p>
            <p v-for="(item,id) in  stockWeightRank"  :key="id" class="row rowCell">
              <span>{{item.name}}</span>
              <span>¥{{item.value}}</span>
            </p>
          </div>
        </el-col>
      </div>
      <div class="topRightCon" style="margin-left: 20px">
        <el-row type="flex" justify="space-between" style="width:100%">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="minTopLeftCon">
            <div class="topRightLLine">
              <div class="topRightLTopTitleLine">
              </div>
              <span class="topRightLTopTitle">各分公司库存量</span>
            </div>
            <bar-charts v-model="allStockMoneyArr" :option="allStockMoneyOption"></bar-charts>
            <div class="chartLine"></div>
          </el-col>
        </el-row>
      </div>
      <div class="topLeftCon" style="margin-left:20px">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="minTopLeftCon">
            <div class="topRightLLine">
              <div class="topRightLTopTitleLine">
              </div>
              <span class="topRightLTopTitle">各分公司库存金额占比</span>
            </div>
            <chart :chartStyle="'min-height:300px'" :option="stockMoneyOption" />
        </el-col>
      </div>
    </el-row>
    <el-row type="flex" class="rowCon marginBot-20" style="padding: 0;">
       <div class="topLeftCon">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="minTopLeftCon">
            <div class="topRightLLine">
              <div class="topRightLTopTitleLine">
              </div>
              <span class="topRightLTopTitle">品类库存占比</span>
            </div>
            <chart :chartStyle="'min-height:300px'" :option="stockClassOption" />
        </el-col>
      </div>
      <div class="topRightCon" style="margin-left: 20px">
        <el-row type="flex" justify="space-between" style="width:100%">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="minTopLeftCon">
            <div class="topRightLLine">
              <div class="topRightLTopTitleLine">
              </div>
              <span class="topRightLTopTitle">各库房浮盈统计</span>
            </div>
            <chart :chartStyle="'min-height:230px;height:330px'" :option="stockRankOption" />
          </el-col>
        </el-row>
      </div>
      <div class="topLeftCon" style="margin-left: 20px">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="minTopLeftCon">
          <div class="topRightLLine row">
            <div class="row">
              <div class="topRightLTopTitleLine">
              </div>
              <span class="topRightLTopTitle">浮盈排名统计</span>
            </div>
          </div>
          <div>
            <p class="row rowCell">
              <span>仓库</span>
              <span>库存量</span>
            </p>
            <p v-for="(item,id) in  gainsWeightRank"  :key="id" class="row rowCell">
              <span>{{item.name}}</span>
              <span>¥{{item.value}}</span>
            </p>
          </div>
        </el-col>
      </div>
    </el-row>
  </div>
</template>
<script>
import chart from "../../../../components/Charts/newChart";
import barCharts from "@/components/Charts/barCharts";
import ICountUp from "vue-countup-v2";
import {
  GetInventoryInfo,
  GetDataByTarget,
  GetRankingByTarget
} from "@/api/gq/index";
import echarts from "echarts";
import bgLayOut from "@/components/bgLayOut/index";
import myTable from "@/components/branch/myTable";
// const lineCircle =
//   "";

export default {
  name: "sellAnalysis",
  components: {
    chart,
    ICountUp,
    bgLayOut,
    myTable,
    barCharts
  },
  data() {
    return {
      allStockMoneyOption: {
        unit: ["吨", "元"],
        barCategoryGap: "80%",
        barWidth: 40,
        yAxis: [
          {
            name: "销量(吨)",
            splitNumber: 2,
            nameTextStyle: {
              color: "#31cee6"
            },
            axisLabel: {
              color: "#31cee6",
              fontSize: 12,
              show: true
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#262544"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(49,206,230,0.2)",
                type: "dashed",
                width: "2"
              }
            }
          },
          {
            name: "利润(元)",
            splitNumber: 2,
            nameTextStyle: {
              color: "#31cee6"
            },
            axisLabel: {
              color: "#31cee6",
              fontSize: 12,
              show: true
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#262544"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(49,206,230,0.2)",
                type: "dashed",
                width: "2"
              }
            }
          }
        ]
      },
      isTest: this.$utils.gqIsTestTure, //  是否测试数据 ture  测试数据  false 正式数据
      sumStockNumber: 0, //  库存总量
      noSellNum: 0, //  定价未售数量
      gainsWeightRank: [], //  浮盈排名统计
      stockClassOption: {}, //  品类库存占比
      stockMoneyOption: {}, //  分公司库存金额占比
      stockWeightRank: [
        {
          name: "专属贸易仓库",
          value: 438788
        },
        {
          name: "供2",
          value: 438788
        },
        {
          name: "钢厂234简称",
          value: 438788
        },
        {
          name: "供一",
          value: 438788
        },
        {
          name: "贸易商简称",
          value: 438788
        }
      ],
      stockWeightDefault: "24017",
      stockWeightArr: [
        {
          label: "按库存",
          value: "24017"
        },
        {
          label: "按钢厂",
          value: "24021"
        }
      ],
      topArr: [
        {
          name: "库存总量(吨)",
          value: 0
        },
        {
          name: "库存总金额(元)",
          value: 0
        },
        {
          name: "合集盈亏(元)",
          value: 0
        },
        {
          name: "吨钢浮盈(元)",
          value: 0
        }
      ],
      noSaleOption: {}, // 定价未售数量
      sumStockOption: {}, // 库存总量
      allStockMoneyArr: {}, // 库存量以及金额占比
      stockRankOption: {}, // 库存排名
      stockRankDefault: "24017",
      vendorStockDefault: "24021",
      grossProfitAmount: 0,
      inventoryCostValue: 0,
      inventoryTotalWeight: 0,
      stockStateOption: {}, // 库存状态分布
      tableData: [],
      tableHeads: [
        {
          key: "departmentName",
          name: "分公司名称"
        },
        {
          key: "customerShortName",
          name: "客户经理"
        },
        {
          key: "employeeName",
          name: "客户名称"
        },
        {
          key: "noPay",
          name: "应收账款"
        },
        {
          key: "zhangPeriod",
          name: "账龄"
        }
      ],
      vendorStockOption: {}, // 厂商库存排名
      warehouseDaySaleOption: {}, // 账户类型
      daySaleOption: {}, // 客户类型
      itemW: 0,
      offsetL: 0,
      nowId: 0,
      workNum: 0,
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      topNav: [
        {
          name: "浩得钢圈驾驶舱",
          id: ""
        },
        {
          name: "销售分析",
          id: "9003"
        },

        {
          name: "应收账款",
          id: "9005"
        },
        {
          name: "库存/差价",
          id: "9007"
        }
      ],
      need_allnums: 0,
      sell_allnums: 62433498,
      storesIncome: true, // 选中状态
      storeId: ""
    };
  },
  mounted() {
    this.fetchData(); // 获取数据
  },
  methods: {
    // 浮盈排名统计
    async fetchGainsSort() {
      try {
        var params = {
          queryType: "24020",
          isAsc: false,
          isTest: this.isTest
        };
        var res = await GetRankingByTarget(params);
        if (res.data.code === "0") {
          this.gainsWeightRank = res.data.result.list;
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 库存量排名前五
    async fetchStockSort() {
      try {
        var params = {
          queryType: this.stockWeightDefault,
          isAsc: false,
          isTest: this.isTest
        };
        var res = await GetRankingByTarget(params);
        if (res.data.code === "0") {
          this.stockWeightRank = res.data.result.list;
        }
      } catch (error) {
        console.log(error);
      }
    },
    async fetchStockClass() {
      try {
        const params = {
          queryType: "24032",
          isTest: this.isTest
          //  "timeType": "3008",
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          this.setOption("stockClassOption", res.data.result.list);
        }
      } catch (error) {
        console.log(error);
      }
    },
    async fetchStockMoney() {
      try {
        var params = {
          queryType: "24018",
          isTest: this.isTest
          //  "timeType": "3008",
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          this.setOption("stockMoneyOption", res.data.result.list);
        }
      } catch (error) {
        console.log(error);
      }
    },
    async fetchNoSale() {
      try {
        var params = {
          queryType: "24034",
          isTest: this.isTest
          //  "timeType": "3008",
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          this.noSellNum = res.data.result.total;
        }
        this.setOption("noSaleOption", res.data.result.list, [
          "#8d4cfd",
          "#0c43fd"
        ]);
      } catch (error) {
        console.log(error);
      }
    },
    async fetchSumStock() {
      try {
        var params = {
          queryType: "24034",
          isTest: this.isTest
          //  "timeType": "3008",
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          this.sumStockNumber = res.data.result.total;
          this.setOption("sumStockOption", res.data.result.list);
        }
      } catch (error) {
        console.log(error);
      }
    },
    setOption(optionName, res, color) {
      var unit = "人";
      var legendArr = [];
      var seriesObj = {
        type: "pie",
        data: []
      };
      res.forEach(item => {
        var obj = {
          label: {
            show: false,
            position: "inside"
          }
        };
        obj.name = item.xData ? item.xData : item.name;
        obj.value = item.value;
        var legendObj = {
          name: "",
          icon: "circle",
          textStyle: {
            color: "#31cee6",
            fontSize: 14,
            padding: [0, 10]
          }
        };
        legendObj.name = item.xData ? item.xData : item.name;
        legendArr.push(legendObj);
        seriesObj.data.push(obj);
      });
      var option = {
        circulation: true, // pie图标循环播放
        tooltip: {
          formatter: params => this.$utils.formatterPieTwo(res, params, unit)
        },
        title: {
          text: "总用户数量",
          subtext: 4444
        },
        legend: {
          data: legendArr,
          top: "88%",
          orient: "horizontal"
        },
        series: [seriesObj]
      };
      if (color) {
        option.color = color;
      }
      this[optionName] = option;
    },
    // 各仓库库存以及金额占比
    async fetchAllStockMoney() {
      try {
        var params = {
          queryType: "24017", // 仓库库存量,
          isTest: this.isTest
        };
        var res = await GetRankingByTarget(params);
        var paramsMoney = {
          queryType: "24020", // 仓库金额,
          isTest: this.isTest
        };
        var resMoney = await GetRankingByTarget(paramsMoney);

        if (resMoney.data.code === "0") {
          var data = res.data.result.list;
          var dataMoney = resMoney.data.result.list;
          this.initAllStockMoney(data, dataMoney);
        }
      } catch (e) {
        console.log(e);
      }
    },
    initAllStockMoney(res, resMoney) {
      var resDataArr = [
        {
          name: "销量",
          value: 0,
          list: res
        },
        {
          name: "利润",
          value: 0,
          list: resMoney
        }
      ];
      this.$set(this, "allStockMoneyArr", resDataArr);
    },
    // 各个库房浮盈统计
    async fetchStockRank() {
      try {
        var params = {
          queryType: "24020",
          isTest: this.isTest
          //  "timeType": "3008",
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          var data = res.data.result.list;
          var unit = "销售量(吨)";
          var option = this.returnBarOption(data, unit, "#31cee6", "#0c43fd");
          this.$set(this, "stockRankOption", option);
        }
      } catch (e) {
        console.log(e);
      }
    },
    changeStockRank(res) {
      this.stockRankDefault = res;
      this.fetchStockRank();
    },
    changeVendorStock(res) {
      this.vendorStockDefault = res;
      this.fetchVendorStock();
    },
    // 库存总量
    async fetchStockTotal() {
      const paramsData = {
        isTest: this.isTest
      };
      try {
        var res = await GetInventoryInfo(paramsData);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.topArr[0].value = resData.totalInventory;
          this.topArr[1].value = resData.inventoryCostValue;
          this.topArr[2].value = resData.grossProfitAmount;
          this.topArr[3].value = resData.grossProfitPerTon;
        }
      } catch (e) {
        console.log(e);
      }
    },
    formatterPieTwo(res, params, unit) {
      var minResult = "";
      if (res[0].list) {
        res[params.dataIndex].list.forEach((item, id) => {
          var minItem =
            "<div style='display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 10px'><span>" +
            item.name +
            "</span><span style='margin-top:2px;font-size:20px;font-family:DIN Condensed Bold'>" +
            item.value +
            "</span></div>";
          minResult += minItem;
        });
      }
      var val = params.data.value;
      var imgConStart =
        "<div style='display:flex;padding:15pt 12pt 12pt 12pt;color:" +
        params.color +
        ";flex-direction:column;background:rgba(0,0,0,0.7);border-radius:10px;'>" +
        "<span style='width:100%;font-size:30px;font-family:DIN Condensed Bold'>" +
        val +
        "</span>" +
        "<div style='width:100%;display:flex;align-items:center;justify-content:space-between;flex-direction:row;margin-top:8pt;font-size:12px'>";

      var result =
        minResult === ""
          ? imgConStart + "</div>"
          : imgConStart + minResult + "</div>";
      return result;
    },
    // 厂商库存排名
    async fetchVendorStock() {
      try {
        var params = {
          queryType: this.vendorStockDefault,
          isTest: this.isTest
        };
        var res = await GetRankingByTarget(params);
        if (res.data.code === "0") {
          var data = res.data.result.list;
          var unit = "价格(元)";
          var option = this.returnBarOption(data, unit, "#da34fb", "#6937fd");
          this.$set(this, "vendorStockOption", option);
        }
      } catch (e) {
        console.log(e);
      }
    },
    //  库存占比分布
    async fetchStockState() {
      try {
        var params = {
          statisticalTime: "",
          queryType: "24019",
          isTest: this.isTest
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          var unit = "";
          var data = res.data.result.list;
          this.setPieOption("stockStateOption", data, unit, "10%");
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 新建  pie Option
    // optionName：option ，res：数据 ， right：距离  ，colorArr ：颜色数组
    setPieOption(optionName, res, unit, right, colorArr) {
      var xData = [];
      var seriesObj = {
        type: "pie",
        radius: ["50%", "60%"],
        label: {
          formatter: "{b} \n {d}%",
          fontSize: 20,
          position: "inside",
          color: "#fff",
          fontFamily: "DIN Condensed Bold"
        },
        data: []
      };
      res.forEach(item => {
        var xObj = {
          name: "",
          icon: "circle",
          textStyle: {
            color: "#31cee6",
            fontSize: 14,
            padding: [0, 10]
          }
        };
        xObj.name = item.xData ? item.xData : item.name;
        xData.push(xObj);
        var obj = {};
        obj.name = item.xData ? item.xData : item.name;
        obj.value = item.value;
        seriesObj.data.push(obj);
      });
      var option = {
        color: colorArr || [],
        tooltip: {
          trigger: "item",
          formatter: params => this.formatterPieTwo(res, params, unit)
        },
        legend: {
          data: xData,
          right: right || "0%"
        },
        series: [seriesObj]
      };
      this[optionName] = option;
    },
    // unit:单位  startColor:开始的颜色  endColor:结束的颜色
    returnBarOption(res, unit, startColor, endColor) {
      var xData = [];
      var symbolClip = true;
      var max = 0;
      var data1 = {
        type: "bar",
        name: "",
        label: {
          normal: {
            show: true,
            position: "top",
            textStyle: {
              color: startColor,
              fontWeight: "bold",
              fontFamily: "DIN Condensed Bold",
              fontSize: "22"
            }
          }
        },
        itemStyle: {
          normal: {
            barBorderRadius: [30, 30, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: startColor
              },
              {
                offset: 1,
                color: endColor
              }
            ])
          }
        },
        z: 10,
        symbolBoundingData: max,
        data: [],
        barWidth: 21
      };
      res.forEach(item => {
        xData.push(item.name);
        var obj = {};
        max = Number(item.value) > max ? Number(item.value) : max;
        obj.value = item.value;
        obj.symbolClip = symbolClip;
        data1.data.push(obj);
      });
      data1.symbolBoundingData = max;
      var option = {
        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 45,
            formatter: function(value, index) {
              return "{value|" + value + "}";
            }
          }
        },
        yAxis: {
          name: unit,
          nameGap: 30,
          nameTextStyle: {
            color: "#31cee6"
          }
        },
        legend: {
          show: false
        },
        tooltip: {
          axisPointer: {
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          },
          formatter: params => this.$utils.formatterModal(res, params, unit)
        },
        grid: {
          bottom: "20%",
          left: "15%"
        },
        series: [data1]
      };
      return option;
    },
    formatterModal(res, params, unit, color) {
      var minResult = "";
      params.forEach(item => {
        var minItem =
          "<div style='display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 10px'><span>" +
          item.seriesName +
          "</span><span style='margin-top:2px;font-size:20px;font-family:DIN Condensed Bold'>" +
          item.value +
          "</span></div>";
        minResult += minItem;
      });
      var index = params[0].dataIndex;
      var val = res[index].value;
      var nowColor = color || "#31cee6";
      var imgConStart =
        "<div style='display:flex;padding:12pt 10px;color:" +
        nowColor +
        ";flex-direction:column;background:rgba(0,0,0,0.7);border-radius:10px;'>" +
        "<span style='width:100%;font-size:30px;padding:8pt 0 0 0 ;font-family:DIN Condensed Bold'>" +
        val +
        "</span>" +
        "<div style='width:100%;display:flex;align-items:center;justify-content:space-between;flex-direction:row;margin-top:8pt;font-size:12px'>";

      var result =
        minResult === ""
          ? imgConStart + "</div>"
          : imgConStart + minResult + "</div>";
      return result;
    },
    // 获取数据
    fetchData() {
      // 浮盈排名
      this.fetchGainsSort();
      // 库存量排名前五
      this.fetchStockSort();
      // 库存状态
      this.fetchStockTotal();

      // 品类库存占比
      this.fetchStockClass();
      // 分公司库存金额占比
      this.fetchStockMoney();
      // 库存总量
      this.fetchSumStock();
      // 定价未售
      this.fetchNoSale();

      // 各仓库库存以及金额占比
      this.fetchAllStockMoney();
      // 库存状态占比
      this.fetchStockState();
      // 厂商库存排名
      this.fetchVendorStock();
      // 各个库房浮盈统计
      this.fetchStockRank();
    }
  }
};
</script>
<style>
@import "../../../../styles/element-ui/select.css";
</style>
<style scoped>
.marginBot-20 {
  margin-bottom: 20px;
}
.titleTop {
  margin: 27px 0 0 30px;
}
.rowCell {
  padding: 0px 45px;
  font-size: 18px;
  height: 48px;
}
.bottomCon {
  display: flex;
  flex-direction: row;
  /*align-items: center;*/
  justify-content: space-around;
  margin-top: 20px;
  background-image: url("../../../../../static/img/bigData4/board_m.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 1813px;
  height: 450px;
  color: #2ff0d2;
}

.topCon span {
  font-size: 50px;
}

.topLeftTopCon {
  margin-top: 35px;
  width: 100%;
}

.topLeftTopCon .topCon {
  width: 100%;
  text-align: center;
}

.boldFontSmall span {
  font-size: 52px;
}

.topLeftTopCon .topSecCon {
  display: flex;
  margin-top: 24px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.topLeftCon {
  display: flex;
  margin-left: 2px;
  justify-content: center;
  margin-top: 20px;
  background-image: url("../../../../../static/img/bigData4/board_s.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 373px;
  height: 393px;
  color: #2ff0d2;
}

.itemTopText {
  font-size: 20px;
  margin-left: 10px;
}

.bottomSelBtn {
  margin-right: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.bottomSelBtn .storeUnActive .el-button {
  background: transparent;
  border: 0;
  color: #1776fd;
}

.bottomSelBtn .storeActive .el-button {
  background: #1776fd;
  border: 1px solid #1776fd;
  color: black;
}

.topLeftItem .itemTop {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  color: #2ff0d2;
}

.topLeftItem .itemTopIcon {
  width: 20px;
  height: 21px;
}

.topLeftItem {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-top: 38px;
  margin-left: 106px;
}

.topLeftItem:first-child {
  margin-left: 0px;
}

.topLeftItem:nth-child(4) {
  margin-left: 0px;
}

.lineImg {
  width: 1712px;
  height: 8px;
  background-image: url("../../../../../static/img/bigData4/minLine.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #2ff0d2;
}

.chartLine {
  width: 1px;
  height: 332px;
  background: rgba(49, 206, 230, 0.2);
  position: absolute;
  right: 0;
  top: 10%;
}

.minTopLeftCon {
  position: relative;
  margin-top: 10px;
}

.topRightLLine {
  display: flex;
  align-items: center;
  margin-left: 36pt;
  margin-top: 16px;
}

.topRightLTopTitle {
  font-size: 20px;
  margin-left: 6pt;
}

.topRightLTopTitleLine {
  width: 3px;
  height: 14px;
  margin-top: 6px;
  background: #2ff0d2;
}

.topLeftCon span {
  /* font-size: 50px; */
  line-height: 60px;
  margin-top: 2px;
}

.topRightCon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  margin-top: 20px;
  background-image: url("../../../../../static/img/gq/stockMid.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 1030px;
  height: 393px;
  color: #2ff0d2;
}

.topBottomLines {
  bottom: -6pt;
  transition: left 0.5s;
  left: 0;
  height: 3px;
  background: #31cee6;
  position: absolute;
}

.active {
  font-weight: bold;
}

.topNavaArrItem {
  display: flex;
  color: rgba(49, 206, 230, 0.8);
  font-size: 18px;
  cursor: pointer;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  height: 16px;
  border-left: 1px solid rgba(49, 206, 230, 0.2);
}

.topNavaArrItem:nth-child(1) {
  border-left: 0;
}

.topNavs {
  position: relative;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12pt;
}

.topNavArr {
  width: 100%;
  display: flex;
  height: 79px;
  align-items: flex-end;
  justify-content: center;
}

.itemTop {
  text-align: center;
  color: #2ff0d2;
}

.changeCen-right-tableData-content {
  position: relative;
}

.changeCen-right-tableData-content:after {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  width: 1px;
  height: 730px;
  background-color: rgba(47, 240, 210, 0.3);
}

.changeCen-right-tableData-content p {
  display: flex;
  margin-top: 40px;
  margin-bottom: 0;
  color: #2ff0d2;
  font-size: 18px;
  border-bottom: 1px solid rgba(47, 240, 210, 0.3);
}

.changeCen-right-tableData-content p span {
  width: calc(100% / 5);
  height: 62px;
  line-height: 62px;
  text-align: center;
}

.changeCen-right-tableData-content-list {
  padding-top: 34px;
  padding-bottom: 34px;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
}

.changeCen-right-tableData-content-list li {
  display: flex;
  margin-bottom: 34px;
  color: #2ff0d2;
  font-size: 18px;
}

.changeCen-right-tableData-content-list li span {
  width: calc(100% / 5);
  text-align: center;
}

.changeCen-i {
  display: inline-block;
  width: 3px;
  height: 14px;
  margin-top: 6px;
  margin-right: 6px;
  background-color: #2ff0d2;
}
</style>
